<template>
  <div class="interaction-receive">
    <div class="header">
      <span>内置数据交互流</span>
    </div>
    <div v-if="interaction_receive != undefined" class="body">
      <Tooltip content="开启之后，此组件将会接收内置交互流中发起的交互变量" placement="left" max-width="200">
        <Checkbox v-model="interaction_receive">开启接收权限</Checkbox>
      </Tooltip>
    </div>
    <div v-else class="not-stream-message">当前组件版本未支持内置交互流，请升级组件</div>
  </div>
</template>

<script>
import {createHelpers} from 'vuex-map-fields';

const {mapFields} = createHelpers({
  getterType: 'designer/getLayoutItem',
  mutationType: 'designer/updateLayoutItem',
});

export default {
  name: "InteractionReceive",
  props: {},
  data() {
    return {}
  },
  mounted() {

  },
  methods: {},
  computed: {
    ...mapFields({

      interaction_receive: 'component.compConfigData.interaction_receive'

    }),
  },
  watch: {}
}
</script>

<style lang="less" scoped>
.interaction-receive {
  background-color: #616161;
  border: 2px solid #424242;
  border-radius: 4px;
  margin-bottom: 10px;
  .header {
    padding: 5px 10px 5px 10px;
    background-color: #2196f3;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }
  .body {
    padding: 10px;
  }
  .not-stream-message {
    padding: 8px;
    text-align: center;
    color: #f44336;
  }
}
</style>
